<template>
  <div class="md_preview_container">
    <div :class="['md_preview', { fullScreen }]">
      <div
        class="md_preview_scroll_container"
        v-html="html"
        @scroll="getScrollBarTop"
        :style="previewStyle"
      ></div>
    </div>
    <transition name="slide-fade">
      <helpDoc
        v-if="showHelp === 'help'"
        @updateShowDoc="$emit('updateShowDoc', $event)"
        :showHelp.sync="showHelp"
      />
      <dirDoc
        v-if="showHelp === 'dir'"
        @updateShowDoc="$emit('updateShowDoc', $event)"
        :showHelp.sync="showHelp"
        :dirTags="dirTags"
        :scrollBarTop.sync="scrollBarTop"
      />
    </transition>
  </div>
</template>
<script>
import helpDoc from "./components/help-doc.vue";
import dirDoc from "./components/toc-doc.vue";
export default {
  name: "md-preview",
  components: { helpDoc, dirDoc },
  data() {
    return {
      scrollBarTop: 0
    };
  },
  props: {
    id: {
      type: String,
      default: ""
    },
    text: {
      type: [String, Number],
      default: ""
    },
    htmlMinHeight: {
      default: ""
    },
    height: {
      type: Number,
      default: 0
    },
    html: {
      type: [String, Promise],
      default: ""
    },
    showHelp: {
      type: [Boolean, String],
      default: false
    },
    dirTags: {
      type: Array,
      default: () => []
    },
    fullScreen: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.addClass();
    this.addControls();
    this.addCopyBtn();
  },
  updated() {
    this.addClass();
    this.addControls();
    this.addCopyBtn();
  },
  computed: {
    previewStyle() {
      return {
        height:
          this.height > 0 && !this.fullScreen ? this.height + "px" : "auto",
        minHeight: this.htmlMinHeight + "px"
      };
    }
  },
  methods: {
    addClass() {
      setTimeout(() => {
        const previewDomList = document.querySelectorAll(
          ".md_preview_container>.md_preview code"
        );
        if (!previewDomList.length) return;
        previewDomList.forEach(item => {
          if (!item.classList.contains("md_hljs")) {
            item.classList.add("md_hljs");
          }
        });
      }, 0);
    },
    addControls() {
      setTimeout(() => {
        const videoDomList = document.querySelectorAll(
          ".md_preview_container>.md_preview video"
        );
        if (!videoDomList.length) return;
        videoDomList.forEach(item => {
          item.setAttribute("preload", "auto");
        });
      }, 0);
    },
    addCopyButtonToPre(el) {
      const innerCode = el.textContent;
      const copyBtn = document.createElement("button");
      copyBtn.setAttribute("class", "md_preview_copybtn");
      const newContent = document.createTextNode("复制代码");
      copyBtn.appendChild(newContent);

      copyBtn.addEventListener("click", () => {
        if (!window.navigator.clipboard) {
          return;
        }
        window.navigator.clipboard.writeText(innerCode).then(() => {
          copyBtn.textContent = "复制成功";
          setTimeout(() => {
            copyBtn.textContent = "复制代码";
          }, 1000);
        });
      });
      el.appendChild(copyBtn);
    },
    addCopyBtn() {
      setTimeout(() => {
        const codeBlocks = document.querySelectorAll(
          ".md_preview_container>.md_preview pre"
        );
        codeBlocks.forEach(el => {
          // 检查是否已经添加了复制按钮，避免重复添加
          if (!el.querySelector(".md_preview_copybtn")) {
            this.addCopyButtonToPre(el);
          }
        });
      }, 0);
    },
    getScrollBarTop() {
      if (this.showHelp === "dir")
        this.scrollBarTop = document.querySelector(
          ".md_preview_scroll_container"
        ).scrollTop;
    }
  }
};
</script>
<style lang="less" scoped>
@import url("https://file.atomgit.com/uploads/assets/md_editor/katex/katex.min.css");

.md_preview_container {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.md_preview_container > .md_preview {
  // min-height: 148px;
  padding: 14px 0;
  box-sizing: border-box;
  color: var(--md-editor-text-color);
  word-break: break-all;
  overflow-y: auto;

  .md_preview_scroll_container {
    overflow-y: auto;
    position: relative;
    scroll-behavior: smooth;
  }

  &.fullScreen {
    max-height: calc(100% - 42px);
    overflow-y: auto;
  }

  .help_doc {
    height: 100%;
  }
}

/deep/ .katex-display {
  overflow: hidden;
  overflow-x: auto;
  padding: 6px 0;
}
</style>
